import { ChildMenu } from '@/reducers/menuSlice';
import { AppDispatch } from "@/store";
import CommandBase from '../base';
import { message, Upload } from 'antd';
import { useAppDispatch, useAppSelector } from '@/store';
import { renderer } from '@/core/renderer';
import LayerImage from '@/core/layers/image';
import canvasSlice, { CanvasSize } from '@/reducers/canvasSlice';
import { getObjectFitSize } from '@/core/compute/objectFit';
import { useMessage } from '@/context/message/main';
import { getFileNameFromUrl } from '@/utils/image';


let instance: CommandFileOpen;

export default class CommandFileOpen implements CommandBase{
  static MenuItem: React.FC<ChildMenu> = (childMenu) => {
    const dispatch = useAppDispatch();
    const canvasState = useAppSelector(state => state.canvas)
    return <>
      <Upload
        className='menu-item upload'
        accept='.jpeg,.jpg,.png,.webp'
        showUploadList={false}
        maxCount={1}
        beforeUpload={(file) => {
          const uploadableMIMETypes = ['image/jpeg', 'image/png', 'image/webp']
          if(uploadableMIMETypes.indexOf(file.type) == -1) message.warning(`您选择的文件格式不支持，支持 “jpeg、jpg、png、webp” 类型的图片`);
          return false
        }}
        onChange={(info) => {
          const file = info.file as unknown as File;  // antd 当前版本问题 在 beforeUpload 返回 false 时，info.file 固定返回 File
          CommandFileOpen.open(file, canvasState.rasterDOMRect, dispatch)
        }}
      >
        <div className='menu-item-inner'>
          <span className='menu-item-inner__label'>{ childMenu.name }</span>
          <span className='menu-item-inner__shortcut'>{ childMenu.shortcut }</span>
        </div>
      </Upload>
    </>
  }

  constructor(){
    if(instance) return instance
    else instance = this
  }

  static triggerCommand(dispatch: AppDispatch){

  }

  static open(fileOrUrl: File | string, rasterDOMRect: CanvasSize, dispatch: AppDispatch){
    const img = new Image();
    img.crossOrigin = 'Anonymous'
    img.onload = () => {
      let fileName = '';
      if(fileOrUrl instanceof File){
        fileName = fileOrUrl.name
        window.URL.revokeObjectURL(img.src)
      }
      else if(typeof fileOrUrl == 'string'){
        fileName = getFileNameFromUrl(fileOrUrl).name
      }
      
      const objectFitSize = getObjectFitSize({
        boxWidth: rasterDOMRect.width,
        boxHeight: rasterDOMRect.height,
        contentWidth: img.naturalWidth,
        contentHeight: img.naturalHeight,
        mode: 'scale-down'
      })

      dispatch(canvasSlice.actions.setMain({
        width: objectFitSize.width,
        height: objectFitSize.height
      }))
      
      renderer.add(new LayerImage({
        name: fileName,
        ctxType: 'main',
        img: img,
        x: 0,
        y: 0,
        zoom: 1,
        rotate: 0,
        width: objectFitSize.width,
        height: objectFitSize.height,
      }), dispatch)
    }

    if(fileOrUrl instanceof File){
      img.src = window.URL.createObjectURL(fileOrUrl)
    }
    else if(typeof fileOrUrl == 'string'){
      img.src = fileOrUrl
    }
  }
}